import React, { forwardRef, useState } from "react";
import { Form, Input, Select } from "antd";

// React.forwardRef(render)用法  重点☆
const ShowAddUser = forwardRef((props, ref) => {
  const { Option } = Select;
  const [isDisabled, setIsDisabled] = useState(false);
  return (
    <Form ref={ref} layout="vertical">
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: "用户名禁止为空",
            trigger: "Blur",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: "密码禁止为空",
            trigger: "onBlur",
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={
          isDisabled
            ? []
            : [
                {
                  required: true,
                  message: "区域禁止为空",
                  trigger: "onBlur",
                },
              ]
        }
      >
        <Select
          defaultValue="请选择区域"
          disabled={isDisabled}
          style={{ width: 470 }}
          // onChange={handleChange}
        >
          {props.regionList.map((item) => {
            return (
              <Option
                key={item.id}
                value={item.value}
                disabled={
                  props.roleType === 1 ? false : item.title !== props.region
                }
              >
                {item.title}
              </Option>
            );
          })}
        </Select>
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[
          {
            required: true,
            message: "角色禁止为空",
          },
        ]}
      >
        <Select
          defaultValue="请选择角色"
          style={{ width: 470 }}
          onChange={(value) => {
            // 超级管理员禁止选择区域
            if (value === 1) {
              setIsDisabled(true);
              ref.current.setFieldsValue({ region: "" });
            } else {
              setIsDisabled(false);
            }
          }}
        >
          {props.roleList.map((item) => {
            return (
              <Option
                key={item.id}
                value={item.id}
                disabled={item.id <= props.roleType}
              >
                {item.roleName}
              </Option>
            );
          })}
        </Select>
      </Form.Item>
    </Form>
  );
});
export default ShowAddUser;
